<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./main.css" />
        <script src="./node_modules/jquery/dist/jquery.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
        </div>

        <!-- Use any element to open the sidenav -->
        <button onclick="openNav()">open</button>
        <button onclick="skewDiv()">skew</button>
        <button onclick="scaleDiv()">scale</button>
        <button onclick="tranDiv('matrix')">matrix</button>
        <button onclick="tranDiv('rotateX')">rotateX</button>
        <button onclick="tranDiv('rotateY')">rotateY</button>
        <button onclick="tranDiv('rotateZ')">rotateZ</button>
        <button onclick="tranDiv('rotate3d')">rotate3d</button>
        <button id="flip">flip card</button>

        <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
        <div id="main">
        ...
        </div>

        <div class="square">
            Who doesn’t love freebies? 
        </div>

        <section class="container">
            <div id="card">
                <figure class="front"></figure>
                <figure class="back"></figure>
            </div>
        </section>

        <script src="./main.js"></script>
    </body>
</html>